<template id="attachment-img">
  <el-dialog title="选择图片" :visible.sync="dialogVisible" :close-on-click-modal="false" width="55%" @close="modalClose" @opened="dialogOpened" class="attachmentImg">
    <div flex="box:first" class="attachment_img_box">
      <div class="attachment_img_left" v-loading="groupListLoading">
        <el-menu class="group-menu" mode="vertical">
          <el-scrollbar style="height: 523px;width: 100%;">
            <div class="goods-menu">
              <el-menu-item index="all" @click="selected(0)" :class="{'is-active':allindex=='all'}" style="text-align: center">
                <span>全部</span>
              </el-menu-item>
              <template v-for="item in groupItem">
                <el-menu-item :index="item.id" @click="selected(item.id)" :key="item.id">
                  <div flex="dir:left box:last" class="fenlei">
                    <i class="el-icon-circle-close gbfenlei" style="display: none" @click="deleteType(item.id)"></i>
                    <div style="overflow: hidden;text-overflow: ellipsis;width: 100%">
                      <span>{{item.name}}</span>
                    </div>
                  </div>
                </el-menu-item>
              </template>
            </div>
          </el-scrollbar>
          <el-popover placement="top" width="160" v-model="visible">
            <el-input v-model="new_type_name" placeholder="请输入分组名称" size="mini"></el-input>
            <div style="text-align: right; margin: 0;margin-top: 10px;">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="addNewAttType">确定</el-button>
            </div>
            <el-button slot="reference" style="margin-left: 22%;margin-top: 13px" size="small">
              <i class="el-icon-circle-plus-outline"></i> 新建分组
            </el-button>
          </el-popover>
        </el-menu>
      </div>
      <div flex="dir:top" class="attachment_img_right" v-loading="rightLoading">
        <div class="selectBox">
          <el-input placeholder="请输入图片名称" suffix-icon="el-icon-search" v-model="atta_name" size="small" @keyup.enter.native="search(atta_name)" @input="search(atta_name)" style="width: 30%;padding-left: 12px;"></el-input>
          <div style="float: right;padding: 0 10px 0 0;">
            <el-upload class="upload-demo" :action="UploadUrl()" :multiple="true" :limit="50" :on-exceed="handleExceed" :file-list="fileList" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload" :data="uploadData" :on-progress="handProgress">
              <el-button size="small" type="primary">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                上传图片
              </el-button>
            </el-upload>
          </div>
        </div>
        <el-scrollbar class="scrollbar" style="height: 460px;">
          <div class="app-attachment-list">
            <template v-for="(item, index) in attachments">
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top" :open-delay="1" :key="item.id">
                <div class="app-attachment-item" @click="selectedItem(index,item.url)">
                  <div class="app-attachment-item-bj">
                    <div class="imgStyle">
                      <el-image style="width: 100%; height: 143px;border-radius: 5px;" :src="item.url" fit="cover"></el-image>
                      <div class="mask" :style="getStyle2(index)">
                        <i class="el-icon-check center-icon pos-center"></i>
                        <p class="triangle">
                          <i class="el-icon-check"></i>
                        </p>
                      </div>
                    </div>
                    <div class="app-attachment-name">{{item.name}}</div>
                    <i class="el-icon-error delete" @click="deleteItem(item.id)"></i>
                  </div>
                </div>
              </el-tooltip>
            </template>
          </div>
        </el-scrollbar>
        <div style="padding: 5px;text-align: right;margin-top:auto">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize" @current-change="current_change"></el-pagination>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="selectedItems()" size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import index from '../api/index';

export default {
  name: 'attachment-img',
  props: {
    type: {
      type: String,
      default: 'img'
    },
    type2: {
      type: String,
      default: ''
    },
    op: {
      type: String
    }
  },
  // props: ['srcType'],
  data() {
    return {
      visible: false,
      atta_name: '',
      uploadParams: {
        type_id: 0,
        type: 1
      },
      category: 0, //分类ID
      keywords: '',
      // type_id:'',//分类ID
      total: 0, //默认数据总数
      pagesize: 30, //每页的数据条数
      currentPage: 1, //默认开始页面
      dialogVisible: false, //是否显示模态框
      groupItem: [], //分类组
      attachments: [],
      groupListLoading: false,
      rightLoading: false,
      new_type_name: '',
      fileList: [], //文件列表
      selectedArr: {},
      attachmentList: '12',
      // srcType:''
      uploadData: {
        key: '',
        token: ''
      },
      file: {
        Url: '',
        path: '',
        name: '',
        size: 0
      },
      att_type: '',
      allindex: 'all'
    };
  },
  created() {
    let that = this;
    // that.init();
  },
  methods: {
    // getStyle(index) {
    //     let that = this;
    //     var currentPage = that.currentPage,
    //         s = that.selectedArr[that.type == 'img' ? 'danxuan' : 'item' + index + '' + currentPage]
    //     return s && s.page == currentPage && s.index == index ? 'border:1px solid #FF8000;background:#fff2e6' : ''
    // },
    getStyle2(index) {
      let that = this;
      var currentPage = that.currentPage,
        s = that.selectedArr[that.type == 'img' ? 'danxuan' : 'item' + index + '' + currentPage];
      return s && s.page == currentPage && s.index == index ? 'display:block' : '';
    },
    modalClose() {
      let that = this;
      that.selectedArr = {};
    },
    dialogOpened() {
      this.getgroupItem();
      this.getAttachment_List();
    },
    handProgress() {
      let that = this;
      that.rightLoading = true;
      // that.$message({
      //     message: '上传中，请稍等',
      //     type: 'success',
      //     duration:500,
      //     onClose:()=>{
      //     },
      // })
    },
    //获取左边分组
    getgroupItem() {
      let that = this;
      this.$api.get('common/file/get-category', { storeId: this.type2 }, (res) => {
        if (res.code == 1) {
          that.groupItem = res.data;
          that.groupListLoading = false;
          that.visible = false;
        } else {
          that.groupListLoading = false;
        }
      });
    },
    //获取图片列表
    getAttachment_List() {
      let that = this;
      that.rightLoading = true;
      this.$api.get(
        'common/file/get-picture',
        {
          page: that.currentPage,
          category: that.category,
          keywords: that.keywords,
          storeId: this.type2
        },
        (res) => {
          if (res.code == 1) {
            that.attachments = res.data;
            that.total = res.count;
            that.rightLoading = false;
          } else {
            that.rightLoading = false;
          }
        }
      );
    },
    //新建分组
    addNewAttType() {
      let that = this;
      that.groupListLoading = true;
      this.$api.post('common/file/save-category', { storeId: this.type2, name: that.new_type_name }, (res) => {
        if (res.code == 1) {
          that.visible = false;
          that.$message({
            message: res.msg,
            type: 'success',
            duration: 500,
            onClose: () => {
              that.new_type_name = '';
              that.getgroupItem();
            }
          });
        } else {
          that.visible = false;
          that.$message.error(res.msg);
        }
      });
    },
    //删除分类
    deleteType(id) {
      let that = this;
      that.groupListLoading = true;
      this.$api.post('common/file/del-picture-category', { id: id }, (res) => {
        if (res.code == 1) {
          that.visible = false;
          that.$message({
            message: res.msg,
            type: 'success',
            duration: 500,
            onClose: () => {
              that.getgroupItem();
            }
          });
        } else {
          that.$message.error(res.msg);
          that.groupListLoading = false;
        }
      });
    },
    search(atta_name) {
      let that = this;
      console.log(atta_name);
      this.keywords = atta_name;
      // _this.init(keywords);
      that.getAttachment_List();
    },
    //切换分页
    current_change(currentPage) {
      let that = this;
      that.currentPage = currentPage;
      that.getAttachment_List();
    },
    //删除图片
    deleteItem(id) {
      let that = this;
      that.rightLoading = true;
      this.$api.post('common/file/del-picture', { id: id }, (res) => {
        if (res.code == 1) {
          that.visible = false;
          that.$message({
            message: res.msg,
            type: 'success',
            duration: 500,
            onClose: () => {
              that.getAttachment_List();
            }
          });
        } else {
          that.$message.error(res.msg);
          that.groupListLoading = false;
        }
      });
    },
    UploadUrl: function () {
      let backendPath = index.backendPath;
      return backendPath + 'common/file/get-category';
    },
    //上传前判断
    beforeUpload: function (file) {
      console.log('上传前判断', file);
      // var date = new Date();
      // filePath = 'yzd_edu/image/' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getTime() + this.getRandom(111111, 999999) + '.' + file.name.split(".")[1]
      // this.uploadData.key = filePath
      const isIMG = file.type === 'image/jpg' || file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
      const isLt = file.size / 1024 / 1024 < 2;
      if (!isIMG) {
        this.$message.error('上传图片只支持jpg、jpeg、png格式!');
        return false;
      }
      if (!isLt) {
        this.$message.error('文件大小不能超过 2MB!');
        return false;
      }
    },
    handleError: function (res) {
      this.$message({
        message: '上传失败',
        duration: 2000,
        type: 'warning'
      });
    },
    handleSuccess: function (res, file, fileList) {
      // console.log('123',res)
      // console.log('234',file)
      console.log('345', fileList);
      this.file = file;
      this.addAttachment(); //保存到数据库
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 50 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    addAttachment() {
      let that = this;
      const formData = new FormData();
      formData.append('file', this.file.raw);
      formData.append('category', this.category);
      formData.append('storeId', this.type2);
      this.$api.post('common/file/upload', formData, (res) => {
        if (res.code == 1) {
          that.getAttachment_List(); //刷新列表
          that.$message.success('上传成功');
        } else {
          that.$message.error(res.msg);
          console.log(res.msg);
        }
      });
    },
    // getRandom(start, end, fixed = 0) {
    //     let differ = end - start
    //     let random = Math.random()
    //     return (start + differ * random).toFixed(fixed)
    // },
    selected(id) {
      let that = this;
      that.rightLoading = true;
      // that.uploadParams.type_id = id
      that.currentPage = 1;
      that.category = id;
      that.allindex = 'otherList';
      that.getAttachment_List();
    },
    selectedItem(index, url) {
      let that = this;
      // console.log(index,url)
      var istype = that.type == 'img',
        str = istype ? 'danxuan' : 'item' + index + '' + that.currentPage,
        s = that.selectedArr[str];
      if (s && s.index == index) {
        that.$delete(that.selectedArr, str);
      } else {
        if (istype) {
          that.$delete(that.selectedArr, str);
        }
        that.$set(that.selectedArr, str, {
          page: that.currentPage,
          index,
          url
        });
      }
    },
    selectedItems() {
      let that = this;
      that = this;
      var item = that.selectedArr,
        str = '',
        arr = [];
      for (const key in item) {
        str += str ? ',' + item[key].url : item[key].url;
        arr.push(item[key].url);
      }
      // console.log(str,arr)
      that.$emit('attachment', {
        str,
        arr
      });
      that.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss">
.attachmentImg {
  .el-dialog {
    border-radius: 6px;
  }

  .goods-menu {
    width: 160px;
  }

  .goods-menu li {
    padding-left: 0 !important;
  }

  .el-dialog__title {
    line-height: 28px;
    font-size: 14px;
    color: #333;
  }

  .el-dialog__header {
    padding: 10px 20px;
    line-height: 1;
    border-bottom: 1px solid #f2f2f2;
  }

  .el-dialog__body {
    padding: 10px 20px;
  }

  .el-dialog__footer {
    border-top: 1px solid #f2f2f2;
  }

  .el-button--primary {
    color: #fff;
    background-color: #155bd4;
    border-color: #155bd4;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #155bd4;
    color: #fff;
  }

  .el-dialog__wrapper {
    z-index: 2009 !important;
  }

  input[type='file'] {
    display: none;
  }

  .delete {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 16px;
    display: none;
  }

  .app-attachment-item {
    outline: none;
  }

  .app-attachment-item:hover .delete {
    display: block;
  }

  .el-upload-list {
    position: absolute;
    max-height: 355px;
    /* overflow-y: auto; */
    width: 252px;
    background: #fff;
    position: absolute;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    right: 0;
  }

  /* 图片上传 */
  .data-image {
    margin-top: 5px;
  }

  /* 图片选择框 */
  .attachment_img_box {
    /*border: 1px solid rgb(227, 227, 227);*/
    margin-bottom: 10px;
    min-height: 300px;
  }

  .attachment_img_left {
    border-right: 1px solid #f2f2f2;
  }

  .group-menu {
    border-right: none;
    width: 165px;
  }

  .selectBox {
    padding: 10px 0;
  }

  .app-attachment-list {
    /*padding: 5px;*/
    width: 100%;
    padding-right: 10px;
  }

  .app-attachment-list * {
    box-sizing: border-box;
  }

  .app-attachment-list:after {
    clear: both;
    display: block;
    content: ' ';
  }

  .app-attachment-item {
    display: inline-block;
    cursor: pointer;
    position: relative;
    float: left;
    width: 20%;
    height: 196px;
    padding-bottom: 20px;
    /*margin: 7.5px;*/
    text-align: center;
    /*padding: 10px 10px 0;*/
  }

  .app-attachment-item-bj {
    margin: 10px;
  }

  .imgStyle {
    position: relative;
  }

  .imgStyle .mask {
    display: none;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(199, 194, 194, 0.7);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
  }

  .mask .center-icon {
    font-size: 40px;
    color: #fff;
  }

  .mask .center-icon:before {
    transform: rotate(0);
  }

  .mask .pos-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }

  .mask .triangle {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: -26px;
    line-height: 60px;
    text-align: center;
    background: #409eff !important;
    transform: rotate(45deg);
  }

  .mask .triangle .el-icon-check:before {
    display: inline-block;
    margin-top: 12px;
    transform: rotate(-67deg);
    position: relative;
    top: -2px;
  }

  .mask .triangle i {
    color: #fff;
  }

  .app-attachment-item.checked,
  .app-attachment-item.selected {
    box-shadow: 0 0 0 1px #1ed0ff;
    background: #daf5ff;
    border-radius: 5px;
  }

  .app-attachment-item.checked .app-attachment-active-icon,
  .app-attachment-item.selected .app-attachment-active-icon {
    opacity: 1;
  }

  .app-attachment-item .app-attachment-img {
    display: block;
  }

  .app-attachment-item .file-type-icon {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: #666;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
  }

  .scrollbar {
    height: 100%;
  }

  .app-attachment-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /*margin-top: 5px;*/
    overflow: hidden;
  }

  .el-upload-list {
    display: none;
  }

  .el-menu-item.is-active {
    /*border-color: transparent;*/
    color: #409eff !important;
    background: #c3e1fe !important;
  }

  .el-menu-item:focus,
  .el-menu-item:hover {
    outline: 0;
    background: #fff !important;
  }

  .el-menu-item.is-active:focus,
  .el-menu-item.is-active:hover {
    color: #409eff !important;
    background: #c3e1fe !important;
  }

  .el-menu-item,
  .el-submenu__title {
    width: 127px;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 15px;
  }

  .el-menu-item {
    padding: 0;
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .fenlei {
    text-align: center;
  }

  .fenlei:hover .gbfenlei {
    display: block !important;
  }

  .gbfenlei {
    position: absolute;
    top: -9px;
    right: 4px;
    font-size: 18px;
    cursor: pointer;
    color: #d7d7d7;
  }

  [flex] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  [flex] > * {
    display: block;
  }

  [flex] > [flex] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  [flex~='dir:left'] {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  [flex~='dir:right'] {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: end;
  }

  [flex~='dir:top'] {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  [flex~='dir:bottom'] {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: end;
  }

  [flex~='main:left'] {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  [flex~='main:right'] {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  [flex~='main:justify'] {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  [flex~='main:center'] {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  [flex~='cross:top'] {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  [flex~='cross:bottom'] {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  }

  [flex~='cross:center'] {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  [flex~='cross:baseline'] {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
  }

  [flex~='cross:stretch'] {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  [flex~='box:mean'] > *,
  [flex~='box:first'] > *,
  [flex~='box:last'] > *,
  [flex~='box:justify'] > * {
    width: 0;
    height: auto;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  [flex~='box:first'] > :first-child,
  [flex~='box:last'] > :last-child,
  [flex~='box:justify'] > :first-child,
  [flex~='box:justify'] > :last-child {
    width: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  [flex~='dir:top'][flex~='box:mean'] > *,
  [flex~='dir:top'][flex~='box:first'] > *,
  [flex~='dir:top'][flex~='box:last'] > *,
  [flex~='dir:top'][flex~='box:justify'] > *,
  [flex~='dir:bottom'][flex~='box:mean'] > *,
  [flex~='dir:bottom'][flex~='box:first'] > *,
  [flex~='dir:bottom'][flex~='box:last'] > *,
  [flex~='dir:bottom'][flex~='box:justify'] > * {
    width: auto;
    height: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  [flex~='dir:top'][flex~='box:first'] > :first-child,
  [flex~='dir:top'][flex~='box:last'] > :last-child,
  [flex~='dir:top'][flex~='box:justify'] > :first-child,
  [flex~='dir:top'][flex~='box:justify'] > :last-child,
  [flex~='dir:bottom'][flex~='box:first'] > :first-child,
  [flex~='dir:bottom'][flex~='box:last'] > :last-child,
  [flex~='dir:bottom'][flex~='box:justify'] > :first-child [flex~='dir:bottom'][flex~='box:justify'] > :last-child {
    height: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  [flex-box='0'] {
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  [flex-box='1'] {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  [flex-box='2'] {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    -webkit-flex-shrink: 2;
    -ms-flex-negative: 2;
    flex-shrink: 2;
  }

  [flex-box='3'] {
    -webkit-box-flex: 3;
    -webkit-flex-grow: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
    -webkit-flex-shrink: 3;
    -ms-flex-negative: 3;
    flex-shrink: 3;
  }

  [flex-box='4'] {
    -webkit-box-flex: 4;
    -webkit-flex-grow: 4;
    -ms-flex-positive: 4;
    flex-grow: 4;
    -webkit-flex-shrink: 4;
    -ms-flex-negative: 4;
    flex-shrink: 4;
  }

  [flex-box='5'] {
    -webkit-box-flex: 5;
    -webkit-flex-grow: 5;
    -ms-flex-positive: 5;
    flex-grow: 5;
    -webkit-flex-shrink: 5;
    -ms-flex-negative: 5;
    flex-shrink: 5;
  }

  [flex-box='6'] {
    -webkit-box-flex: 6;
    -webkit-flex-grow: 6;
    -ms-flex-positive: 6;
    flex-grow: 6;
    -webkit-flex-shrink: 6;
    -ms-flex-negative: 6;
    flex-shrink: 6;
  }

  [flex-box='7'] {
    -webkit-box-flex: 7;
    -webkit-flex-grow: 7;
    -ms-flex-positive: 7;
    flex-grow: 7;
    -webkit-flex-shrink: 7;
    -ms-flex-negative: 7;
    flex-shrink: 7;
  }

  [flex-box='8'] {
    -webkit-box-flex: 8;
    -webkit-flex-grow: 8;
    -ms-flex-positive: 8;
    flex-grow: 8;
    -webkit-flex-shrink: 8;
    -ms-flex-negative: 8;
    flex-shrink: 8;
  }

  [flex-box='9'] {
    -webkit-box-flex: 9;
    -webkit-flex-grow: 9;
    -ms-flex-positive: 9;
    flex-grow: 9;
    -webkit-flex-shrink: 9;
    -ms-flex-negative: 9;
    flex-shrink: 9;
  }

  [flex-box='10'] {
    -webkit-box-flex: 10;
    -webkit-flex-grow: 10;
    -ms-flex-positive: 10;
    flex-grow: 10;
    -webkit-flex-shrink: 10;
    -ms-flex-negative: 10;
    flex-shrink: 10;
  }

  [flex~='wrap:nowrap'] {
    flex-wrap: nowrap;
  }

  [flex~='wrap:wrap'] {
    flex-wrap: wrap;
  }

  [flex~='wrap:wrap-reverse'] {
    flex-wrap: wrap-reverse;
  }
}
</style>